<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 图表
        </el-breadcrumb-item>
        <el-breadcrumb-item>财务分析图表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="plugins-tips">
        图表组件。
        链接地址：
        <a href="#" target="_blank">schart</a>
      </div>
      <div class="schart-box">
        <div class="content-title">柱状图</div>
        <schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
      </div>
      <div class="schart-box">
        <div class="content-title">折线图</div>
        <schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
      </div>
      <div class="schart-box">
        <div class="content-title">饼状图</div>
        <schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart>
      </div>
      <div class="schart-box">
        <div class="content-title">环形图</div>
        <schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart>
      </div>
    </div>
  </div>
</template>

<script>
import Schart from "vue-schart";
export default {
  name: "basecharts",
  components: {
    Schart
  },
  data: () => ({
    data1: [
      { name: "2014", value: 11141 },
      { name: "2015", value: 11499 },
      { name: "2016", value: 21260 },
      { name: "2017", value: 11170 },
      { name: "2018", value: 9170 },
      { name: "2019", value: 11450 }
    ],
    data2: [
      { name: "工程审计", value: 11200 },
      { name: "财务审计", value: 11222 },
      { name: "经济责任审计", value: 11283 },
      { name: "管理审计", value: 11314 },
      { name: "其他", value: 12314 }
    ],
    options1: {
      title: "某学院近年审计总额",
      autoWidth: true, // 设置宽高自适应
      showValue: false,
      bgColor: "#F9EFCC",
      fillColor: "#00887C",
      contentColor: "rgba(46,199,201,0.3)",
      yEqual: 7
    },
    options2: {
      title: "某学院近年审计总额",
      bgColor: "#D5E4EB",
      titleColor: "#00887C",
      fillColor: "red",
      contentColor: "rgba(46,199,201,0.3)"
    },
    options3: {
      title: "某学院年度审计总额",
      bgColor: "#829dca",
      titleColor: "#ffffff",
      legendColor: "#ffffff",
      radius: 120
    },
    options4: {
      title: "某学院年度审计总额",
      bgColor: "#829daa",
      titleColor: "#ffffff",
      legendColor: "#ffffff",
      radius: 120,
      innerRadius: 80
    }
  })
};
</script>

<style scoped>
.schart-box {
  display: inline-block;
  margin: 20px;
}
.schart {
  width: 500px;
  height: 400px;
}
.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
</style>